import Vue from "vue";
import Vuex from "vuex";
import Axios from "axios";
// import jsonp from 'jsonp'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 页面标题
    title: '',
    // 电影列表数据
    list: [],
    // 电影详情
    detail: null
  },
  mutations: {
    // 修改当前列表数据
    setFilmList(state, data) {
      // 页面标题
      state.title = data.title;
      // 列表数据
      state.list = data.list
    },
    // 修改详情数据
    setDetail(state, data) {
      state.title = data.title
      state.detail = data.detail
    }
  },
  actions: {
    // 异步获取列表数据
    getListData({ commit }) {
      Axios.get('/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a')
        .then((res) => {
          if (res.status === 200) {
            // 更改store数据
            commit('setFilmList', { title: res.data.title, list: res.data.subjects })
          }
        })
      // debugger
      // jsonp('http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a', (err, data) => {
      //   if (err) return alert('接口请求失败')
      //   console.log(data)
      //   // 提交数据  mutations
      // })
    },
    // 获取详情数据
    getFilmDetail({ commit }, id) {
      Axios.get('/v2/movie/subject/' + id + '?apikey=0df993c66c0c636e29ecbb5344252a4a')
        .then((res) => {
          if (res.status === 200) {
            commit('setDetail', { title: res.data.title, detail: res.data })
          }
        })
    }
  },
  modules: {}
});
